Web Design 101

TUJ Fall 2020

How to Design for the Web

Today’s Agenda

  • Review: HTML
  • What is Design
  • Visual Design Basics
  • break
  • Activity: Making Your First Live HTML Web Page
    • Create your repo
    • Deploy your page
    • The HTML Document

Review

What is HTML?

HyperText Markup Language

Defines the structure of our content.

Why is structure important?

Structure is necessary to help machines understand what to do with our content.

The better machines understand our content, the more helpful they can be for us, the human users.

  • browsers
  • screen readers
  • web crawlers
  • script files (like JavaScript)
  • translation services

How Do We Write HTML?

HTML is comprised of <tags> which are wrapped around content to create nodes or elements.

<p>This content is wrapped with a paragraph tag.</p>

In our discussion of HTML, there’s a topic we keep coming back to…

Content

HTML enhances our content. Without content, the HTML is meaningless.

Two volunteers to walk us through how they made their markup.

Designing with Content

Jumbled pile of lego bricks gets sorted and assembled into different vehicles.
credit: https://visme.co/blog/presentation-structure/

When the content, structure and visual presentation align with goals you’ve created, you will have an effective design.

Today’s Agenda

  • Review: HTML
  • What is Design
  • Visual Design Basics
  • break
  • Activity: Making Your First Live HTML Web Page

What is design?

What design is

  • a plan
  • serves a purpose
  • concerned with use

What design isn’t

  • emotional and abstract
  • only making things “pretty”
  • something that requires innate talent to create
  • art

Example goals

  • I want customers to sign up for my email list.
  • I want people to discover my music.
  • I want to help people with common interests find each other.
  • I want people who are interested in design to follow me on Twitter.

Key Questions

  • “Who am I making this for?”
  • “Why am I making this?”
  • “What should my website do for people?”

Be specific

The largest Swiss Army Knife with 87 implements.
credit: Wenger 16999 at amazon.com

General goals are:

  • hard to measure
  • less effective

Today’s Agenda

  • Review: HTML
  • What is Design
  • Visual Design Basics
  • break
  • Activity: Making Your First Live HTML Web Page

Visual Design Basics

Another enhancement to our content.

Key concepts in visual design:

  • Hierarchy
  • Balance
  • Grids

Hierarchy of Attention

Saccade

Painting with eye movements from observers visualized.
credit: Yarbus AL. Eye Movements and Vision. New York: Plenum Press; 1967.

Some things will inherently draw our focus more than others.

  1. movement / animation
  2. bright colors
  3. circles
  4. things that are large

Use animation sparingly!!!

Bright Colors

Bright text against desaturated photo in Sin City movie poster
credit: imdb.com, Sin City theatrical movie poster.

Circles

Spiral of circles

Scale

Circles of increasing size in a line

Balance

Elements in a composition have visual weight (due to things like shape, color, size, etc.) In a good (pleasing) composition elements with different weights will balance each other out along some imaginary axis.

Four panel illustration of creating visual balance
credit: artnet.nmu.edu/

Balance: Symmetry

The easiest way of achieving balance.

A designer’s conception of a library website.
credit: Yasmen Saeed via Dribbble

Symmetry

Characteristics:

  • Works like a mirror.
  • Content has a clear, understandable structure.
  • Elements tend to have the same weight visually.

Symmetry

Pros:

  • Excellent if the goal is to just let them browser non-hierarchical data.

Cons:

  • Visually, it’s not very exciting.
  • It doesn’t give users much direction about where to look.

Breaking Symmetry

A designer’s conception of a library website. credit: Yasmen Saeed via Dribbble

Creating symmetry and then breaking it can be a great way to draw users visually to something you really want them to notice.

Balance: Asymmetry

  • More visually dynamic.
  • Not mirrored.
  • Harder to balance.

Vibrant asymmetical artistic design for a homepage called Style
credit: Aimm via Dribble

A design for a fictional product featuring asymetical colors and figures.
credit:Shamin Yassar via Dribble

Grids

Provides an order to layout by anchoring different elements to one another

Bootstrap grid system

“Breaking” a grid with curves and diagonals

Example of breaking the grid
credit: Matt Adamson

Today’s Agenda

  • Review: HTML
  • What is Design
  • Visual Design Basics
  • break
  • Activity: Making Your First Live HTML Web Page

Activity

Version Control Practice

Goal: Push your code to Github

Step 1: Sign into GitHub Desktop

Step 2: Clone a repo

Github Desktop clone repo/

Clone this starter repo:

github.com/tokyorachel/html-starter

Github Desktop clone repo by URL/

Step 3: Make a copy in your own repo

In your browser, create new repo on GitHub:

Github Desktop clone repo by URL/

Copy the link to the new repo:

Github Desktop clone repo by URL/

In GitHub Desktop, change the repository settings

Github Desktop repository settings/

Github Desktop repository remote url/

Step 4: Make some changes to the code

Step 5: Commit

Step 6: Push

Check on github!

Deploying

netlify.com

The Structure of an HTML Document

All HTML documents need a root <html> element.

<html>
  <head>
    <!-- metadata about your page goes here -->
  </head>
</html>

We use a <head> section to include metadata about our page:

  • language
  • title
  • icons
  • default size settings (for mobile)
  • styles
  • scripts

The main content of an HTML document goes inside of the <body> tag.

<html>
  <head>
    <!-- metadata about your page goes here -->
  </head>
  <body>
    <!-- All the content you want to display goes here -->
  </body>
</html>

Go forth and make repos!